import { GetServerSideProps, NextPage, PageConfig } from 'next';
import Head from 'next/head';
import { useEffect, useState } from 'react';
import { Dialog, Toast } from 'antd-mobile';
import HeadTitle from '../../components/headtitle';
import MainContainer from '../../components/maincontainer';
import Container from '../../components/container';
import Template from './template';
import uuid from '../../atoms/uuid';
import Set from './set';
import Btn from '../../components/btn';
import smartfetch from '../../atoms/smartfetch';
import { Message as M2, Result as R2 } from '../api/activity/fielddatadel.api';
import { Message as M3, Result as R3 } from '../api/activity/fielddatasave.api';
import api from '../../atoms/api';
import { IData as D1, Query as Q1, Result as R1 } from '../api/activity/fielddata.api';
import pages from '../../atoms/pages';

interface IProps {
	aid: string
}

/**
 * 报名信息设置
 */
const Page: NextPage<IProps> = ({ aid }) => {
	//选择模板
	const [tem, setTem] = useState(false);
	//字段
	const [fields, setFields] = useState<D1[]>([]);
	//执行
	useEffect(() => {
		//获取数据
		void (async () => {
			if (aid) {
				const d = await smartfetch<R1, Q1>(api['/api/activity/fielddata'], 'get', { aid });
				setFields(d.data);
			}
		})();
	}, [aid]);
	return (
		<>
			<Head>
				<title>报名信息设置</title>
			</Head>
			<MainContainer>
				<HeadTitle title='报名信息设置' url={`${pages['/newactivityregistration']}?aid=${aid}`} />
				<Container>
					{/* 数据项 */}
					{fields.map((it, i) => {
						return <Set key={it.id} data={it} no={i + 1}
							onDel={() => {
								setFields(fields.filter((x) => { return x.id !== it.id; }));
							}}
							onUpdate={(v) => {
								const f = fields.map((x) => {
									if (x.id === v.id) {
										x.name = v.name;
										x.type = v.type;
										x.alternative = v.alternative;
										x.isrequired = v.isrequired;
									}
									return x;
								});
								setFields(f);
							}} />;
					})}
					{/* 按钮 */}
					<div className='btn'>
						<Btn label='选择模板数据项' onClick={() => {
							setTem(true);
							setFields(fields);
						}} />
						<Btn label='自定义数据项' onClick={() => {
							const f = fields.map((x) => { return x; });
							f.push({
								id: uuid(),
								did: uuid(),
								name: '自定义',
								type: 1,
								alternative: '',
								isrequired: 0,
								itemtype: 2
							} as D1);
							setFields(f);
						}} />
						<Btn label='删除全部数据项' isRed onClick={async () => {
							const result = await Dialog.confirm({
								content: '确认删除全部数据项？',
							});
							if (result) {
								const result = await smartfetch<R2, M2>(api['/api/activity/fielddatadel'], 'delete', { aid });
								if (result.ok) {
									setFields([]);
									Toast.show({
										content: '删除成功！',
										position: 'center',
										icon: 'success'
									});
								}
								else {
									Toast.show({
										content: result.message,
										position: 'center',
										icon: 'fail'
									});
								}
							}
						}} />
						<Btn label='保存' onClick={async () => {
							const result = await smartfetch<R3, M3>(api['/api/activity/fielddatasave'], 'post', { data: fields, aid });
							if (result.ok) {
								Toast.show({
									content: '保存成功！',
									position: 'center',
									icon: 'success'
								});
							}
							else {
								Toast.show({
									content: result.message,
									position: 'center',
									icon: 'fail'
								});
							}
						}} />
					</div>
				</Container>
				{/* 选择模板 */}
				<div className={tem ? 'tem' : 'untem'}>
					<Template ids={fields}
						onCancel={() => {
							setTem(false);
						}}
						onOk={(f, c) => {
							setTem(false);
							if (c) {
								f.push({
									id: uuid(),
									did: uuid(),
									name: '自定义',
									type: 1,
									alternative: '',
									isrequired: 0,
									itemtype: 2
								} as D1);
							}
							setFields(f);
						}} />
				</div>
			</MainContainer>
			<style jsx>{`
.btn{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 2rem;
}
.data{
background-color: #FFFFFF;
border-radius: 0.625rem;
color: #000000;
font-size: 1.125rem;
width: 13.75rem;
 height: 2.5rem;
border-color: #000000;
border-width: 0.0625rem;
border-style: solid;
margin-bottom: 0.5rem;
}
.del{
background-color: #FFFFFF;
border-radius: 0.625rem;
color: #AF1C1C;
font-size: 1.125rem;
width: 13.75rem;
 height: 2.5rem;
border-color: #AF1C1C;
border-width: 0.0625rem;
border-style: solid;
margin-bottom: 0.5rem;
}
.tem{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.4);
}
.untem{
display: none;
}
			`}</style>
		</>
	);
};

export const config: PageConfig = {
	amp: false
};

export default Page;


export const getServerSideProps: GetServerSideProps<IProps> = async (context) => {
	const query = context.query as Record<string, string>;
	return {
		props: {
			aid: query.aid || ''
		}
	};
};

